<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/1px.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        background-color: #fff;
        font-size: 13px;
      }
      /*头像*/
      
      .flex {
        display: flex;
      }
      
      .user-info {
        padding: 3px 0;
        font-size: 13px;
      }
      
      .header {
        flex: 3;
        text-align: center;
      }
      
      .header img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
      }
      
      .info {
        flex: 5;
        font-size: 14px;
        line-height: 24px;
      }
      
      .change-btn {
        flex: 2;
      }
      /**/
      
      .exchange {
        padding: 0 2%;
        margin: 5px 0;
      }
      
      .text {
        font-size: 13px;
        text-align: center;
      }
      
      .line {
        margin-top: 10px;
      }
      /*列表*/
      
      .goods-list {
        list-style: none;
      }
      
      .goods-each {
        padding: 5px 5px;
        position: relative;
      }
      
      .goods-each:after {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      
      .img-box {
        flex: 2;
        position: relative;
      }
      
      .img-box img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
        text-align: center;
      }
      .img-box .id{
      	position: absolute;
      	bottom: 6px;
      	width: 100%;
      	text-align: center;
      	font-size: 13px;
      }
       .img-box .id span{
       	background-color: rgba(52, 52, 52, .5);
      	color: #FFFFFF;
      	display: inline-block;
      	width: 70px;
       }
      .goods-info-box {
        flex: 4;
        font-size: 14px;
        line-height: 24px;
      }
      
      .goods-info-box div {
        margin-left: 5px;
      }
      
      .goods-op-box {
        flex: 3;
        position: relative;
        height: 100%;
      }
      
      .recovery-num {
        position: absolute;
        right: 20px;
        top: 5px;
        font-size: 13px;
      }
      
      .choose-btn {
        width: 45%;
        position: absolute;
        bottom: -70px;
        right: 5px;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
      }
      .return-btn {
      	background-color: #FF9800;
      	border-color: #FF9800;
      	color: #fff;
      }
      .return-btn:active{
      	background-color:#ef9a60;
      }
      .edit-btn {
        right: 55%;
      }
      /*滚动区*/
      
      .mui-scroll-wrapper {
        top: 115px;
        bottom: 46px;
      }
      /*底部*/
      
      footer {
        height: 46px;
        line-height: 46px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 15px
      }
      
      footer:before {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 46px;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      
      .operation-header {
      }
      
      .operation-header span{
        font-size: 20px;
        display: inline-block;
        width: 40px;
      }
      
      .operation-info {
      }
      
      .operation-info div {
        text-align: left;
        height: 22px;
        line-height: 22px;
        text-indent: 2px;
        font-size: 13px;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <div id="app">
      <div class="mui-content">
        <div class="user-info flex vux-1px-b">
          <div class="header">
            <img src="" alt="" />
          </div>
          <div class="info">
            <div></div>
            <div>ID：</div>
            <div>当前积分：0</div>
          </div>
          <div class="change-btn">
          </div>
        </div>
        <!---->
        <div class="exchange mui-row">
          <div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
          <div class="text mui-col-sm-4 mui-col-xs-4">回收货品</div>
          <div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
        </div>
        <!--礼品-->
        <div id="refreshContainer" class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <ul class="goods-list mui-table-view mui-table-view-chevron vux-1px-t">

            </ul>
            <script id="goodsList" type="text/html">
              <%for(var i=0;i<list.length;i++){%>
              <li class="goods-each">
                <div class="flex">
                  <div class="img-box">
                    <img src="<%=imgPath+list[i].goodsInfo.wareGoods.cutImg%>" alt="" />
                    <div class="id"><span><%=list[i].goodsId%></span></div>
                  </div>
                  <div class="goods-info-box">
                    <div class="goods-name">
                       <%=list[i].goodsInfo.wareGoods.name%>
                    </div>
                    <div class="goods-num">积分：
                    	<%=list[i].goodsInfo.wareGoods.score%>
                    </div>
                  </div>
                  <div class="goods-op-box">
                    <span class="recovery-num">回收数：<%=list[i].recyclingAmount%></span>
                    <button type="button" data-index ="<%=i%>"  class="change-btn mui-btn choose-btn edit-btn">调整</button>
                    <button type="button"  data-index ="<%=i%>" data-loading-text=".." class="return-btn mui-btn choose-btn">入库</button>
                  </div>
                </div>
              </li>
              <%}%>
            </script>
          </div>
        </div>
        <!--底部-->
        <footer class="flex operation-box">
          <div class="operation-header">
            <span class="mui-icon mui-icon-contact"></span>
          </div>
          <div class="operation-info">
            <div>操作员：</div>
            <div>操作时间：</div>
          </div>
        </footer>
        <!---->
      </div>
    </div>
    <script src="../config.js"></script>
    <script src="../js/template-native.js"></script>
    <script type="text/javascript">
      mui.init({
      	beforeback:function(){
      		var returnPage = plus.webview.getWebviewById('return')
      		mui.fire(returnPage,'refresh','')
      	}
      })
      var currentShopObj = {},
      		userRecovery = {},
      		pageList = [],
      		recyclingGoods={
      			recyclingGoodsId:'',
      			storageAmount:'',
      			recyclingTime:''
      		}
      mui.plusReady(function() {
        receiveParams()
        scroll()
        setUser()
        setFooter()
        getList()
        bindEvent()
      })
      //滚动
      function scroll() {
        mui('.mui-scroll-wrapper').scroll({
          scrollY: true,
          bounce: true,
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
        });
      }
			//头像
			function setUser() {
				if(userRecovery.header) {
					document.querySelector(".header img").setAttribute('src',userRecovery.header.indexOf('http')===-1?config.imgPath + userRecovery.header:userRecovery.header)
				}
				var userI =  document.querySelectorAll(".info>div")
				userI[0].innerText = userRecovery.userNick ?userRecovery.userNick:'--'
				userI[1].innerText = (userRecovery.type===1? '卡号：'+  userRecovery.memberId: 'ID：'+ userRecovery.memberId)
				userI[2].innerText = '积分：'+ userRecovery.score 
			}
			function setFooter() {
				var operateInfo =  document.querySelectorAll(".operation-info div")
				operateInfo[0].innerText = '操作员：'+ userRecovery.operationer
				operateInfo[1].innerText = '操作时间：'+ userRecovery.recyclingDate
			}
      function receiveParams() {
        var self = plus.webview.currentWebview()
       		currentShopObj = self.currentShopObj;
        	userRecovery = self.userRecovery
      }
      function getList () {
      	config.ajax({
      		url: '/recycling/checkRecyclingInfo',
      		data:{
      			recyclingId: userRecovery.recyclingId,
      			month:new Date(userRecovery.recyclingTime).format('yyyyMM'),
      			isStorage: false
      		},
      		success: function(res) {
      			if(res.result === 1) {
      				pageList = res.data.goodsList
      				setPage()
      			} else {
      				mui.toast(res.errormsg)
      			}
      		}
      	})
      }
      function setPage () {
      	var html = template('goodsList',{
      		list: pageList,
      		imgPath: config.imgPath
      	})
      	mui('.goods-list')[0].innerHTML = html
      }
      function bindEvent () {
      	//调整
      	mui('.goods-list').on('tap','.change-btn', function(e){
      		var index = this.getAttribute('data-index')
      		var returnNum = pageList[index].recyclingAmount
      		var btn = ['取消','确定']
      		 mui.prompt('请输入回收数量',returnNum, '修改', btn, function(e) {
      		 	if(e.index ===1) {
      		 		if(e.value) {
      		 			pageList[index].recyclingAmount = e.value
      		 			document.querySelectorAll(".recovery-num")[index].innerText = '回收数量：'+ e.value
      		 		} else {
      		 			mui.toast('请输入回收数量！')
      		 		}
      		 	}
      		 },'div')
      		  document.querySelector('.mui-popup-input input').type = 'number'
      	})
      	//入库
      	mui('.goods-list').on('tap','.return-btn',function(e){
      		mui(this).button('loading');
      		var ind = this.getAttribute('data-index')
					var vm = this
      		config.ajax({
      			url:'/recycling/storage',
      			data:{
      				month:new Date(userRecovery.recyclingTime).format('yyyyMM'),
      				goodsId:pageList[ind].goodsId,
      				recyclingId:userRecovery.recyclingId,
      				storageAmount:pageList[ind].recyclingAmount
      			},
      			success: function(res){
      				if(res.result === 1) {
      					mui(vm).button('reset');
      					pageList.splice(ind,1)
      					mui.toast('入库成功！')
      					if(pageList.length>0){
      						setPage()
      					} else {
      						mui.back()
      					}
      				}else {
      					mui(vm).button('reset');
      					mui.toast(res.errormsg)
      				}
      			}
      		})
      	})
      }
    </script>
  </body>

</html>